{{setTitle     "表格"}}
{{setSubTitle  "简单的HTML表格样式"}}
{{setActiveNav "tables"}}

{{> header}}

<div class="content">

    <h2 class="content-subhead">默认表格</h2>
    <p>
        给一个表格元素添加类名{{code "pure-table"}}，这个类名会给表格元素添加内边距和边界，同时对表头加粗。
    </p>

    {{> tables/default}}

  {{#code}}
    {{> tables/default}}
  {{/code}}


    <h2 class="content-subhead">有边框的表格</h2>
    <p>
      给{{code "<table>"}}元素添加类名{{code "pure-table-bordered"}}，就可以给所有的单元格添加水平和垂直方向的边框。
    </p>

    {{> tables/bordered}}

  {{#code}}
    {{> tables/bordered}}
  {{/code}}


    <h2 class="content-subhead">有水平方向的边框的表格</h2>
    <p>
        如果你只想要水平线，你可以给{{code "<table>"}}元素添加类名{{code "pure-table-horizontal"}}
    </p>

    {{> tables/horizontal}}

  {{#code}}
    {{> tables/horizontal}}
  {{/code}}


    <h2 class="content-subhead">有间隔背景的表格</h2>
    <p>
        通过给表格的间隔行{{code "<tr>"}}增加类名{{code "pure-table-odd"}}，使得间隔行有不同的背景颜色，这样就可以很直观地分辨表格数据。
    </p>

    <p>
        <b>注意：</b>在支持CSS3伪选择器<a href="http://caniuse.com/#search=nth-child">{{code "nth-child"}}</a>的浏览器中，有一个更简单的方法。给{{code "<table>"}}元素增加一个类名{{code "pure-table-striped"}}，这样就可以使得间隔行有不同的背景颜色。这个方法在IE8或IE8以下<em>不</em>生效。
    </p>

    {{> tables/striped}}

  {{#code}}
    {{> tables/striped}}
  {{/code}}
</div>
